<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>YUI Browser History Manager - Calendar (YUI Library)</title>
    <link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css"/>
    <link rel="stylesheet" type="text/css" href="../../../examples/assets/dpSyntaxHighlighter.css"/>
    <link type="text/css" rel="stylesheet" href="../assets/tutorial.css"/>
  </head>
  <body>
    <div id="doc3" class="yui-t4">
      <div id="hd">
        <a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
        <h1>YUI Browser History Manager: Calendar</h1>
      </div>
      <div id="bd">
        <div id="toc" class="yui-b">
          <ul>
            <li class="sect"><a href="../index.html">YUI Browser History Manager: Tutorials</a></li>
            <li class="item"><a href="../navbar/index.html">Simple Navigation Bar</a></li>
            <li class="item"><a href="../tabview/index.html">TabView Control</a></li>
            <li class="item selected"><a href="index.html">Calendar Control</a></li>
            <li class="child active"><a href="index.html">Tutorial</a></li>
            <li class="child"><a href="solution.html">Functional Example</a></li>
            <li class="item"><a href="../multi/index.html">Multiple Modules</a></li>
          </ul>
        </div>
        <div id="yui-main">
          <div class="yui-b">

            <p>
              This example demonstrates how to use the Browser History Manager
              to remember which months have been viewed with the calendar widget
              and dynamically update it when the user presses the browser's
              back/forward buttons.
            </p>

            <h2>Import the source files and dependencies</h2>

            <p>
              In our example, we need the Event Utility, DOM Utility, Calendar Widget, and the Browser History Manager:
            </p>

<textarea name="code" class="HTML" cols="60" rows="1">
<link type="text/css" rel="stylesheet" href="calendar.css"/>
<script src="yahoo.js"></script>
<script src="event.js"></script>
<script src="dom.js"></script>
<script src="calendar.js"></script>
<script src="history-experimental.js"></script>
</textarea>

            <h2>Basic markup</h2>

            <p>
              In our example, the calendar widget relies on the following markup:
            </p>

<textarea name="code" class="HTML" cols="60" rows="1">
<div id="calendarContainer"></div>
</textarea>

            <h2>Design your application</h2>

            <p>
              In our simple example, we have only one module, represented by the
              calendar widget. We will refer to this module using the identifier
              "calendar". The state of the calendar module will be represented
              by a string composed of the month and the year the widget currently
              renders, separated by <code>"_"</code>
              (e.g. <code>"2_2007"</code> for February 2007)
            </p>

            <h2>Retrieve the initial state of the calendar module</h2>

            <p>
              Use the <code>YAHOO.util.History.getBookmarkedState</code> method
              and default to the month corresponding to today's date:
            </p>

<textarea name="code" class="JScript" cols="60" rows="1">
var today = new Date();
var defaultCalendarState = ( today.getMonth() + 1 ) + "_" + today.getFullYear();
var bookmarkedCalendarState = YAHOO.util.History.getBookmarkedState( "calendar" );
var initialCalendarState = bookmarkedCalendarState || defaultCalendarState;
</textarea>

            <h2>Register the calendar module</h2>

            <p>
              Use the <code>YAHOO.util.History.register</code> method, passing in
              the calendar module identifier, the initial state of the calendar
              module, and the callback function that will be called when the
              state of the calendar module has changed:
            </p>

<textarea name="code" class="JScript" cols="60" rows="1">
YAHOO.util.History.register( "calendar", initialCalendarState, function( state ) {
    // Show the right month according to the "state" parameter:
    calendar.cfg.setProperty( "pagedate", state.replace( "_", "/" ) );
    calendar.render();
} );
</textarea>

            <h2>Subscribe to the Browser History Manager <code>onLoad</code> event</h2>

            <p>
              Use the Browser History Manager <code>onLoad</code> event handler
              to instantiate the calendar widget. Also, retrieve the current
              state of the calendar module, and use that state to show the
              right month (the current state may be different from the initial
              state under certain circumstances - see the User's Guide)
            </p>

<textarea name="code" class="JScript" cols="60" rows="1">
var calendar;

YAHOO.util.History.onLoadEvent.subscribe( function() {
    // Retrieve the current state of the calendar module
    var currentCalState = YAHOO.util.History.getCurrentState( "cal" );
    var startDate = { pagedate: currentCalState.replace( "_", "/" ) };

    // Instantiate the calendar widget
    calendar = new YAHOO.widget.Calendar( "calendar", "calendarContainer", startDate );
    calendar.beforeRenderEvent.subscribe( handleCalendarBeforeRender, calendar, true );
    calendar.render();
} );
</textarea>

            <h2>Add history entries</h2>

            <p>
              A new history entry must be added every time the user views
              a new month. Use the calendar widget's <code>beforeRender</code>
              event handler (set to <code>handleCalendarBeforeRender</code> -
              see above):
            </p>

<textarea name="code" class="JScript" cols="60" rows="1">
function handleCalendarBeforeRender() {
    var calDate = calendar.cfg.getProperty( "pageDate" );
    var pageDate = ( calDate.getMonth() + 1 ) + "_" + calDate.getFullYear();
    // The following test is crucial. Otherwise, we end up circling forever.
    // Indeed, YAHOO.util.History.navigate will call the module onStateChange callback,
    // which will call createCalendar, which will call calendar.render(), which will
    // end up calling handleCalendarBeforeRender, and it keeps going from here...
    var currentCalState = YAHOO.util.History.getCurrentState( "cal" );
    if ( pageDate != currentCalState )
        YAHOO.util.History.navigate( "cal", pageDate );
}
</textarea>

            <h2>Initialize the Browser History Manager</h2>

            <p>
              Simply call <code>YAHOO.util.History.initialize</code> from a script
              block located right after the opening body tag:
            </p>

<textarea name="code" class="JScript" cols="60" rows="1">
YAHOO.util.History.initialize();
</textarea>

            <div id="stepnav">
              <a class="next" href="solution.html">Continue to <em>Functional Example</em> &gt;</a>
            </div>

          </div>
        </div>
      </div>
      <div id="ft">&nbsp;</div>
    </div>
    <script src="../../../examples/assets/dpSyntaxHighlighter.js"></script>
    <script language="javascript">
      dp.SyntaxHighlighter.HighlightAll('code');
    </script>
  </body>
</html>
